<template>

  <div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>集群模式配置</span>
       </div>
        <div>
          <el-form ref="configForm"  :model="configForm" label-width="110px" :rules="rules">
            <el-form-item label=" 本机IP" prop="localIp">
               <el-input v-model="configForm.localIp" placeholder="请输入本机IP" autocomplete="off" ></el-input>
            </el-form-item>

            <el-form-item label=" 本机端口" prop="localPort">
               <el-input v-model="configForm.localPort" placeholder="请输入端口" autocomplete="off" ></el-input>
            </el-form-item>

             <el-form-item label=" 本机口令" prop="localPwd">
                <el-input v-model="configForm.localPwd" placeholder="请输入集群口令" autocomplete="off" readonly=""></el-input>
             </el-form-item>

             <el-form-item label="主节点" prop="isMaster">
                <el-switch
                  v-model="configForm.isMaster"
                  active-value="1"
                  inactive-value="0"
                  @change="isMaster"
                  >
                </el-switch>
             </el-form-item>

             <el-form-item v-if="configForm.isMaster=='0'" label="主机IP" prop="masterIp">
                <el-input v-model="configForm.masterIp" placeholder="请输入主机IP" autocomplete="off" ></el-input>
             </el-form-item>

             <el-form-item v-if="configForm.isMaster=='0'" label="主机端口" prop="masterPort">
                <el-input v-model="configForm.masterPort" placeholder="请输入主机端口" autocomplete="off" ></el-input>
             </el-form-item>

             <el-form-item v-if="configForm.isMaster=='0'" label="主机口令" prop="masterPwd">
                <el-input v-model="configForm.masterPwd" placeholder="请输入主机口令" autocomplete="off" ></el-input>
             </el-form-item>

             <el-form-item label="启用" prop="enabled">
                <el-switch
                  v-model="configForm.enabled"
                  active-value="1"
                  inactive-value="0"
                  >
                </el-switch>
             </el-form-item>

          </el-form>
        </div>
        <div style="border-top: 1px solid #e6ebf5;padding-top: 16px;text-align: right;">
           <el-button type="primary" round plain icon="el-icon-refresh-right" @click="submitForm" :loading="loading">更新</el-button>
        </div>
    </el-card>
  </div>
</template>
<script>
  import {
    getConfig,
    saveConfig
  } from '@/api/cloud/config'

  import {
    restartSignaling
  } from '@/api/cloud/server'

  import {
    isOk
  } from '@/utils/request'


  export default {
    name: 'ClientConfig',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{
    },
    watch:{
      properties: {
        handler: function(value) {
        },
        immediate: true,
        deep: false
      }
    },
    data(){
      return {
        loading:false,
        configForm:{
          id:'',
          localIp:'',
          localPort:'',
          localPwd:"",
          enabled:'0',
          isMaster:'0',
          masterPwd:'',
          masterPort:'',
          masterIp:'',
        },
        rules: {
          localIp: [{
            required: true,
            message: '请输入本机IP',
            trigger: 'blur'
          }],
          localPort: [{
            required: true,
            message: '请输入本机端口',
            trigger: 'blur'
          }],
          // masterIp: [{
          //   required: true,
          //   message: '请输入主机IP',
          //   trigger: 'blur'
          // }],
          // masterPort: [{
          //   required: true,
          //   message: '请输入主机端口',
          //   trigger: 'blur'
          // }],
          // masterPwd: [{
          //   required: true,
          //   message: '请输入口令',
          //   trigger: 'blur'
          // }],
        }
      }
    },
    created() {
      this.getConfig();
    },
    methods:{
      getConfig(){
        this.loading=true
        getConfig().then(response => {
          this.loading=false
          if(isOk(response)){
            const _data=response.result;
            this.configForm.id=_data.id
            this.configForm.localIp=_data.localIp || ''
            this.configForm.localPort=_data.localPort || ''
            this.configForm.localPwd=_data.localPwd || ''
            this.configForm.enabled=_data.enabled || '0'
            this.configForm.isMaster=_data.isMaster || '0'
            this.configForm.masterPwd=_data.masterPwd || ''
            this.configForm.masterPort=_data.masterPort || ''
            this.configForm.masterIp=_data.masterIp || ''
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      submitForm: function() {
        this.$refs.configForm.validate((valid) => {
          if (valid) {
            this.loading = true
            saveConfig(this.configForm).then(rsp => {
              this.$message({
                type: 'success',
                message:rsp.message
              })
            }).catch(err => {
              console.log(err);
            })
            .finally(() => {
              this.loading = false
            })
          }
        })
      },
      isMaster(value){
        console.log(value)
      }
    }
  }
</script>

<style>
</style>
